<script lang='ts' setup>
import { reactive, ref, Ref } from 'vue';
import Oauth2ClientDetailsServiceApi from '/@/api/org/bean/oauth2-client-details'
import { ModelFormExpose } from '/@/components/platform/form/model-form/interface';
import { commonList } from '/@/api/org/code-list';
const emit = defineEmits<{
    (e: 'add-success', data: any, res: any): void//保存成功回调
    (e: 'update-success', data: any, res: any): void//更新成功回调
}>()

const props = defineProps({
    /**主键值 */
    clientId: String,
})

const JxtechModelFormRef = ref();


const Oauth2ClientDetailsFormData: Ref<any> = ref({
    clientId: props.clientId,
    scopeArray: [] as any[],
    authorizedGrantTypesArray: [] as any[]

})

const rules = {
    clientSecret: [{ required: true, message: '请输入客户端密码', trigger: 'blur' }],
}
const Oauth2ClientDetailsFormState = reactive({
    primaryKey: 'clientId',
    getJxtechModelFormExpose: (): ModelFormExpose => {
        return JxtechModelFormRef.value as ModelFormExpose
    },
    /**新增成功 */
    onAddSuccess: (formData: any, res: any) => {
        emit("add-success", formData, res)
    },
    modelFormCallback: {
        afterId: (formData: any) => {
            Oauth2ClientDetailsFormData.value.scopeArray = formData.scope.split(',')
            Oauth2ClientDetailsFormData.value.authorizedGrantTypesArray = formData.authorizedGrantTypes.split(',')
        },
        preSave: (formData: any) => {
            formData.scope = formData.scopeArray.join(",")
            formData.authorizedGrantTypes = formData.authorizedGrantTypesArray.join(",")
        }
    },
})

defineExpose({
    save: () => Oauth2ClientDetailsFormState.getJxtechModelFormExpose().save()
})
</script>
<template>
    <jxtech-model-form
        ref="JxtechModelFormRef"
        :service-api="Oauth2ClientDetailsServiceApi"
        :primary-key="Oauth2ClientDetailsFormState.primaryKey"
        :form-data="Oauth2ClientDetailsFormData"
        :rules="rules"
        @add-success="Oauth2ClientDetailsFormState.onAddSuccess"
        :callback="Oauth2ClientDetailsFormState.modelFormCallback"
    >
        <el-row>
            <el-col :span="21" :offset="1">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="客户端ID" prop="clientId">
                            <el-input
                                placeholder="请输入客户端ID"
                                v-model="Oauth2ClientDetailsFormData.clientId"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="可访问微服务" prop="resourceIds">
                            <el-input
                                placeholder="请输入可访问微服务"
                                v-model="Oauth2ClientDetailsFormData.resourceIds"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="客户端密码" prop="clientSecret">
                            <el-input
                                placeholder="请输入客户端密码"
                                v-model="Oauth2ClientDetailsFormData.clientSecret"
                                type="password"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="范围" prop="scope">
                            <jxtech-dictionary-checkout
                                v-model:value="Oauth2ClientDetailsFormData.scopeArray"
                                codeItemId="SCOPE"
                            ></jxtech-dictionary-checkout>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <jxtech-model-form-item label="授权类型" prop="authorizedGrantTypes">
                            <jxtech-dictionary-checkout
                                v-model:value="Oauth2ClientDetailsFormData.authorizedGrantTypesArray"
                                codeItemId="GRANT_TYPE"
                            ></jxtech-dictionary-checkout>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="回调地址" prop="webServerRedirectUri">
                            <el-input
                                placeholder="请输入回调地址"
                                v-model="Oauth2ClientDetailsFormData.webServerRedirectUri"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="默认权限" prop="authorities">
                            <el-input
                                placeholder="请输入默认权限"
                                v-model="Oauth2ClientDetailsFormData.authorities"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="令牌超时时间（秒）" prop="accessTokenValidity">
                            <el-input
                                placeholder="请输入令牌超时时间（秒）"
                                v-model="Oauth2ClientDetailsFormData.accessTokenValidity"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="刷新令牌超时时间（秒）" prop="refreshTokenValidity">
                            <el-input
                                placeholder="请输入刷新令牌超时时间（秒）"
                                v-model="Oauth2ClientDetailsFormData.refreshTokenValidity"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>